<template>
  <div class="dashboard-container">
    <el-card class="me-area"
             :body-style="{ padding: '16px' }"
             v-for="article in articles"
             :key="article.id">
      <div class="me-article-header">
        <a class="me-article-title">{{ article.title }}</a>
        <el-button v-if="article.weight > 0"
                   class="me-article-icon"
                   type="text">置顶</el-button>
        <span class="me-pull-right me-article-count">
          <i class="me-icon-comment">{{ article.commentCounts }}</i>&nbsp;
        </span>
        <span class="me-pull-right me-article-count">
          <i class="el-icon-view"></i>&nbsp;{{ article.viewCounts }}
        </span>
      </div>

      <div class="me-artile-description">
        {{ article.summary }}
      </div>
      <div class="me-article-footer">
        <span class="me-article-author">
          <i class="me-icon-author"></i>&nbsp; {{ article.author }}
        </span>
        <el-tag size="mini"
                type="primary">{{
          article.category.categoryName
        }}</el-tag>
        <el-tag v-for="tag in article.tags"
                :key="tag.tagName"
                size="mini"
                type="success">{{ tag.tagName }}</el-tag>

        <span class="me-pull-right me-article-count">
          <i class="el-icon-time"></i>&nbsp; {{ article.createDate }}
        </span>
      </div>
      <el-button class="me-pull-right"
                 type="danger"
                 size="mini"
                 @click="deleteArticle(article.id)">删除</el-button>
    </el-card>
  </div>
</template>

<script>
import articleApi from "@/api/article";

export default {
  inject: ["reload"],
  name: "ArticleItem",
  data() {
    return {
      articles: {},
    };
  },
  created() {
    articleApi
      .list()
      .then((result) => {
        this.articles = result.data;
      })
      .catch((err) => {});
  },
  methods: {
    deleteArticle(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
            articleApi.deleteArticle(id).then((res) => {
            this.reload();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style scoped>
.me-article-header {
  /*padding: 10px 18px;*/
  padding-bottom: 10px;
}

.me-article-title {
  font-weight: 600;
}

.me-article-icon {
  padding: 3px 8px;
}

.me-article-count {
  color: #a6a6a6;
  padding-left: 14px;
  font-size: 13px;
}

.me-pull-right {
  float: right;
}

.me-artile-description {
  font-size: 13px;
  line-height: 24px;
  margin-bottom: 10px;
}

.me-article-author {
  color: #a6a6a6;
  padding-right: 18px;
  font-size: 13px;
}

.el-tag {
  margin-left: 6px;
}
</style>
